<template>
  <div>
    <PageTable :columns="columns" :loading="loading" :data="dataSource" />
    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getAdvertList"
    />
  </div>
</template>

<script>
import { OUT_SIDE_TYPE } from '@/enum/index'
export default {
  name: 'AdvertList',
  data() {
    return {
      dialogVisible: false,
      loading: true,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '广告信息',
          render: (h, { row }) => {
            return (
              <div style={'display: flex;flex-direction: column;align-items: center;'}>
                <span>{row.bannerName}</span>
                <el-image
                  style={'width: 100px;height: 80px;'}
                  src={row.bannerImg}
                  preview-src-list={[row.bannerImg]}
                />
              </div>
            )
          }
        },
        {
          prop: 'placeName',
          label: '广告位置'
        },
        {
          label: '指向位置',
          render: (h, { row }) => {
            return (
              <div>
                {row.bannerTarget ? (
                  <div>{row.bannerTarget}</div>
                ) : (
                  <div>
                    {row.outsideType
                      ? `第三方/${this.getLabel(OUT_SIDE_TYPE, row.outsideType)}`
                      : '暂未指定'}
                  </div>
                )}
              </div>
            )
          }
        },
        {
          label: '是否启用',
          render: (h, { row }) => {
            return (
              <span style={row.isShow ? 'color:#409eff' : ''}>
                {row.isShow ? '启用' : '未启用'}
              </span>
            )
          }
        },
        {
          label: '新增时间',
          prop: 'createdTime'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.isShow ? (
                  <el-button type="text" onClick={() => this.updateStatus(row.id, row.isShow)}>
                    隐藏
                  </el-button>
                ) : (
                  <span>
                    <el-button type="text" onClick={() => this.updateStatus(row.id, row.isShow)}>
                      启用
                    </el-button>

                    <PopConfirm
                      text={'确认删除该广告吗？'}
                      confirm={() => this.deleteAdvert(row.id)}
                    >
                      <el-button class="ml-10 mr-10" type="text">
                        删除
                      </el-button>
                    </PopConfirm>
                  </span>
                )}
                <el-button type="text" onClick={() => this.editHandle(row.id)}>
                  编辑
                </el-button>
              </div>
            )
          }
        }
      ],
      dataSource: [],
      cityList: [],
      cityIdList: []
    }
  },
  created() {
    this.getAdvertList()
  },
  methods: {
    // 根据value获取枚举内容
    getLabel(arr, value) {
      return arr.find(item => item.value == value).label
    },
    // 获取广告列表
    async getAdvertList() {
      const params = {
        ...this.listQuery
      }
      const {
        data: { records, total }
      } = await this.$http.advert.advertApi.getAdvertList({ params })
      this.dataSource = records
      this.total = total
      this.loading = false
    },
    // 更新状态
    async updateStatus(id, isShow) {
      const { status, msg } = await this.$http.advert.advertApi.updateStatus({
        id,
        isShow: !isShow
      })
      if (status === 200) {
        this.$message.success(`${status ? '已隐藏' : '已显示'}`)
        this.getAdvertList()
      } else {
        this.$message.error(msg)
      }
    },
    // 删除广告
    async deleteAdvert(id) {
      const { status, msg } = await this.$http.advert.advertApi.deleteAdvert(id)
      if (status === 200) {
        this.$message.success('已删除！')
        if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getAdvertList()
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑广告
    editHandle(id) {
      this.$router.push({
        name: 'EditAdvert',
        query: { id }
      })
    }
  }
}
</script>
